import React, { PureComponent } from "react";
/**
 * 或者切换为PureComponent组件来实现，默认重写了shouldComponentUpdate钩子
 */
export default class optimization extends PureComponent {
  state = { name: "yueyue" };
  changeName = () => {
    this.setState({ name: "hyy" });
    // 使用 PureComponent 进行对象比较还是直接比较地址
    // const obj = this.state
    // obj.name = 'hyy'
    // this.setState(obj)
  };
  /**
   * 子组件一直被重新渲染，是因为该生命周期钩子返回值一直是true
   * @param nextProps 接下来的props
   * @param nextState 接下来的state
   */
  //   shouldComponentUpdate(nextProps, nextState) {
  //     console.log("next === > ", nextProps, nextState);
  //     console.log("this === > ", this.props, this.state);
  //     if (nextState.name === this.state.name) return false;
  //     else return true;
  //   }
  render() {
    return (
      <div>
        this is name = {this.state.name}
        <button onClick={this.changeName}>change name</button>
        <br />
        <Son name={this.state.name}></Son>
      </div>
    );
  }
}

class Son extends PureComponent {
  /**
   * 子组件判断props是否改变
   */
  //   shouldComponentUpdate(nextProps, nextState) {
  //     console.log("son next === > ", nextProps, nextState);
  //     console.log("son this === > ", this.props, this.state);
  //     if (nextProps.name === this.props.name) return false;
  //     else return true;
  //   }
  render() {
    console.log("Son Components render");
    return <div>son Component = {this.props.name}</div>;
  }
}
